<!-- 请假 -->
<template>
  <ContainerLayout class="leave-container">
    <div class="leave-container-content">
      <template v-if="dataList">
        <el-calendar v-model="valueCalendar" class="calendar-warp">
          <template #date-cell="{ data }">
            <LeaveCalendarCell :date="data.date" :item-data="getLeaveInfoByDate(data.date)" @click="handleClickBtnOpenDialog" @delete="handleClickBtnDelete" />
          </template>
        </el-calendar>
      </template>
    </div>
  </ContainerLayout>
  <DialogLeave ref="dialogLeaveRef" @submit-successed="handleDialogSubmitSuccessed" />
</template>
<script lang="ts" setup>
import ContainerLayout from '../layout/ContainerLayout.vue'
import DialogLeave from '../components/dialog/DialogLeave.vue'
import { ref, onMounted, watch } from 'vue'
import { useUsersStore } from '../stores'
import http from '../http'
import { formatDate } from '../utils'
import { ElMessageBox } from 'element-plus'
import LeaveCalendarCell from '../components/Leave/LeaveCalendarCell.vue'
import ResultMessage from '../utils/ResultMessage'
import api from '../api'

const valueCalendar = ref(new Date())
const dialogLeaveRef = ref()
const defaultLeaveCategory = ref('1')
const dataList = ref<any>()
const resultList = ref<any[]>([])
/**
 * 点击按钮打开对话框
 *
 * @param date 日期对象
 */
const handleClickBtnOpenDialog = (date: Date) => {
  if (dialogLeaveRef.value) {
    dialogLeaveRef.value.openDialog(date)
  }
}
/**
 * 获取请假类别信息
 *
 * @returns 无返回值
 */
const getLeaveCategory = async () => {
  // 发送HTTP GET请求
  const res2 = await http({
    // 请求方法
    method: 'GET',
    // 请求路径
    path: '/dev-api/system/dict/data/list',
    // 请求参数
    params: {
      // 字典类型
      dictType: 'holiday_category',
    },
  })
  // 将默认假期类别赋值给defaultLeaveCategory
  defaultLeaveCategory.value = res2.rows[0].dictValue
}
/**
 * 获取考勤分类列表
 *
 * @returns {Promise<void>}
 */
const getLeaveList = async (currentDate: Date = new Date()) => {
  // 获取当前用户信息
  const currentUser = useUsersStore().getAllState()

  // 获取当前日期的年份和月份
  const year = currentDate.getFullYear()
  const month = currentDate.getMonth()

  // 计算当前月份的第一天和最后一天
  const start = new Date(year, month, 1)
  const end = new Date(year, month + 1, 0)

  // 设置请求参数
  const params = {
    pageSize: 99999,
    userName: currentUser.username,
    startLeaveDate: formatDate(start, 'yyyy-MM-dd'),
    endLeaveDate: formatDate(end, 'yyyy-MM-dd'),
  }

  const rows = await api.Leave.getList(params)

  // 更新dataList和resultList的值
  dataList.value = rows
  resultList.value = rows

  // 打印dataList的值
  // console.log('dataList.value', dataList.value)
}
/**
 * 根据给定日期获取请假信息
 *
 * @param date 给定的日期
 * @returns 返回包含对应日期的请假信息的数组
 */
const getLeaveInfoByDate = (date: Date) => {
  // 初始化结果数组
  const result: any = []

  // 遍历dataList.value数组
  dataList.value.map((e: any) => {
    // 如果元素的leaveDate属性与格式化后的日期相等
    if (e.leaveDate === formatDate(date, 'yyyy-MM-dd')) {
      // 将该元素添加到结果数组中
      result.push(e)
    }
  })

  // 返回结果数组
  return result
}
/**
 * 点击删除按钮
 *
 * @param date 日期对象
 */
const handleClickBtnDelete = async (id: number) => {
  // 显示确认删除对话框
  ElMessageBox.confirm('确定删除?', '提示')
    .then(async () => {
      // 发送删除请求
      const res = await http({
        // 请求方法
        method: 'DELETE',
        // 请求路径
        path: `/dev-api/oa/leave/${id}`,
        // 请求参数
        params: {},
      })
      // 显示操作结果
      ResultMessage(res.code, '删除请假')
      // 重新获取请假列表
      await getLeaveList()
    })
    .catch(() => {
      // 捕获错误
      // catch error
    })
}

/**
 * 处理对话框提交成功的回调函数
 *
 * @returns {Promise<void>} 无返回值
 */
const handleDialogSubmitSuccessed = async () => {
  await getLeaveList()
}
watch(
  () => valueCalendar.value,
  async (newValue) => {
    await getLeaveList(newValue)
  }
)
onMounted(async () => {
  await getLeaveCategory()
  await getLeaveList()
})
</script>
<style lang="scss" scoped>
.leave-container {
  display: flex;
  flex-direction: row;
  .leave-container-content {
    height: 100%;
    flex: 1;
    .calendar-warp {
      height: 100%;
      .day {
        height: 100%;
      }
    }
  }
}
</style>

<style lang="scss">
.calendar-warp {
  display: flex;
  flex-direction: column;
  .el-calendar__body {
    flex: 1;
    padding-bottom: 10px;
    .el-calendar-day {
      height: 100%;
    }
    .el-calendar-table {
      height: 100%;
    }
  }
}
</style>
